<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>文章编辑-blog</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" th:href="@{/X-admin/css/font.css}">
    <link rel="stylesheet" th:href="@{/X-admin/css/xadmin.css}">
    <link rel="stylesheet" th:href="@{/X-admin/css/formSelects-v4.css}">
    <link rel="stylesheet" th:href="@{/X-admin/editormd/css/editormd.css}"/>
    <!-- jQuery -->
    <script type="text/javascript" th:src="@{/X-admin/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/X-admin/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/X-admin/js/xadmin.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/X-admin/js/formSelects-v4.min.js}" charset="utf-8"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .editormd-dialog-container select{
            display: initial;
        }
    </style>
</head>

<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <input th:if="${blogInfo!=null}" type="hidden" name="blogId" th:value="${blogInfo?.blogId}">
                        <div class="layui-col-md2 layui-show-xs-block">
                            <input type="text" name="blogTitle" placeholder="*输入文章标题(必填)" autocomplete="off"
                                   class="layui-input" lay-verify="required" th:value="${blogInfo?.blogTitle}"></div>
                        <div class="layui-col-md3 layui-show-xs-block">
                            <input type="text" name="blogSubUrl" placeholder="输入自定义路径,如:redis-info,默认为id"
                                   autocomplete="off" class="layui-input" th:value="${blogInfo?.blogSubUrl}"></div>
                        <div class="layui-col-md3 layui-show-xs-block">
                            <select class="layui-select" name="tagId" xm-select="tagId" xm-select-show-count="1"
                                    lay-verify="required">
                                <option value="">请选择文章标签</option>
                            </select></div>
                        <div class="layui-col-md2 layui-show-xs-block">
                            <select class="layui-select" name="blogCategoryId" xm-select="blogCategoryId"
                                    xm-select-radio=""
                                    lay-verify="required">
                                <option value="">请选择文章分类</option>
                            </select></div>
                        <div class="layui-col-md1 layui-show-xs-block">
                            <input type="checkbox" name="blogStatus" lay-skin="switch" value="1"
                                   lay-text="发布|草稿" th:checked="${blogInfo?.blogStatus eq 1}">
                        </div>
                        <div class="layui-col-md10 layui-show-xs-block">
                            <input type="text" name="blogPreface" th:value="${blogInfo?.blogPreface}"
                                   lay-verify="required|blogPreface" placeholder="请输入文章前言"
                                   autocomplete="off" class="layui-input"></div>
                        <div class="layui-col-md1 layui-show-xs-block">
                            <input type="checkbox" name="enableComment" th:checked="${blogInfo?.enableComment eq 0}"
                                   lay-skin="switch" value="0" lay-text="允许评论|不允许评论">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="submit">
                                提交
                            </button>
                        </div>
                        <div class="layui-inline layui-show-xs-block" th:if="${blogInfo!=null}">
                            <a class="layui-btn" href="javascript:history.go(-1)">
                                返回上级</a>
                        </div>
                        <div class="form-group" id="blog-editormd">
                            <textarea name="blogContent" style="display:none;"
                                      th:utext="${blogInfo!=null and blogInfo.blogContent !=null}?${blogInfo.blogContent}: ''"></textarea>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- editor.md -->
<script type="text/javascript" th:src="@{/X-admin/editormd/src/editormd.js}"></script>
<script th:inline="javascript">
    layui.use(['form', 'layer'], function () {
        var layer = layui.layer,
            form = layui.form,
            $ = layui.$;

        var blogEditor = editormd("blog-editormd", {
            width: "100%",
            height: 640,
            syncScrolling: "single",
            path: "/X-admin/editormd/lib/",
            toolbarModes: 'full',
            emoji: true,
            /**图片上传配置*/
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/admin/v1/blog/uploadFile",
            onload: function (obj) {
            }
        });

        var formSelects = layui.formSelects;
        //动态加载标签配置
        formSelects.config("tagId", {
            type: 'get',
            keyName: 'tagName',
            keyVal: 'tagId',
            response: {
                statusCode: 200,
                statusName: 'resultCode',
                msgName: 'message',
                dataName: 'data'
            }
        });
        formSelects.config("blogCategoryId", {
            type: 'get',
            keyName: 'categoryName',
            keyVal: 'categoryId',
            response: {
                statusCode: 200,          //成功状态码
                statusName: 'resultCode',     //code key
                msgName: 'message',         //msg key
                dataName: 'data'        //data key
            }
        });
        var blogCategoryIds = new Array();
        blogCategoryIds[0] = [[${blogInfo?.blogCategoryId}]];
        formSelects.data('tagId', 'server', {
            url: '/admin/v1/tags/list',
            success: function (id, url, searchVal, result) {
                formSelects.value('tagId', [[${blogTags}]], true);
            }
        });
        formSelects.data('blogCategoryId', 'server', {
            url: '/admin/v1/category/list',
            success: function (id, url, searchVal, result) {
                formSelects.value('blogCategoryId', blogCategoryIds, true);
            }
        });

        form.verify({
            blogPreface: function (value, item) { //value：表单的值、item：表单的DOM对象
                console.log(value.length);
                if (value.length > 200) {
                    return '介绍不能超过200个字符';
                }
            }
        });


        form.on("submit(submit)", function (data) {
            var datas = data.field;
            datas.blogCategoryName = formSelects.value('blogCategoryId', 'nameStr');
            datas.blogTags = formSelects.value('tagId', 'nameStr');
            datas.blogTagIds = formSelects.value('tagId', 'val');
            if("" === datas.enableComment || datas.enableComment == null){
                datas.enableComment = 1;
            }
            var index = top.layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});
            console.log(datas);
            // 提交信息
            $.post("/admin/v1/blog/edit", datas, function (s) {
                setTimeout(function () {
                    top.layer.close(index);
                    top.layer.alert(s.message);
                }, 1500);
            });
            return false;
        });

    });
</script>
</body>
</html>